<script setup></script>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
  setup() {
    const message = ref("");

    return {
      message,
    };
  },
  data: () => {
    return {
      url: 'http://127.0.0.1:8000/plates/download?image_name=',
      plates: [],
      selectedDate: "",
      selectedProvince: "",
      showProvinceDropdown: false,
      dailyRecords: [],
      provinceRecords: [],
      currentPage: "home",
      parkingStatus: "正常",
      activePlates: [],
      showDailyNotFound: false,
      showProvinceNotFound: false,
      feeSettings: {
        feeWithin1Hour: 5,
        feeAfter1Hour: 2,
        feeWithin24Hours: 50,
      },
      selectedDateRange1:
        new Date().getFullYear() +
        "-" +
        (new Date().getUTCMonth() + 1) +
        "-" +
        new Date().getUTCDate(),
      selectedDateRange2:
        new Date().getFullYear() +
        "-" +
        (new Date().getUTCMonth() + 1) +
        "-" +
        new Date().getUTCDate(),
    };
  },
  methods: {
    async fetchPlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.plates = response.data.plates;
      } catch (error) {
        console.error("获取车牌记录失败:", error);
      }
    },
    async fetchDailyRecords() {
      if (!this.selectedDate) {
        alert("请选择日期");
        return;
      }
      try {
        const response = await axios.get("http://localhost:8000/plates/all");
        this.dailyRecords = response.data.plates.filter((plate) => {
          const enterTime = new Date(plate.enter_time);
          const selectedDate = new Date(this.selectedDate);
          return enterTime.toDateString() === selectedDate.toDateString();
        });
        if (this.dailyRecords.length === 0) {
          this.showDailyNotFound = true;
          setTimeout(() => {
            this.showDailyNotFound = false;
          }, 1500);
        }
      } catch (error) {
        console.error("获取每日记录失败:", error);
      }
    },
    async fetchActivePlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.activePlates = response.data.plates;
      } catch (error) {
        console.error("获取车位状态失败:", error);
      }
    },
    calculateParkingTime(enterTime, exitTime) {
      if (!exitTime) return "未离开";
      const enter = new Date(enterTime);
      const exit = new Date(exitTime);
      const diff = exit - enter;
      const hours = Math.floor(diff / 3600000);
      const minutes = Math.floor((diff % 3600000) / 60000);
      return `${hours}小时${minutes}分钟`;
    },
    validateDate() {
      if (new Date(this.selectedDate) > new Date(this.today)) {
        this.selectedDate = this.today
      }
    }
  },
  computed: {
    today() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  created() {
    this.fetchPlates();
    this.fetchActivePlates();
  },
};
</script>

<template>
  <div style="height: 100%">
    <div>
      <h1 class="text-center mb-4">日分析</h1>
      <div class="row mb-4">
        <div class="col-md-6">
          <label for="dateSelect">选择日期：</label>
          <div class="input-group">
            <input type="date" id="dateSelect" class="form-control" v-model="selectedDate" :max="today"
              @change="validateDate" />
            <button class="btn btn-primary" @click="fetchDailyRecords">
              确定
            </button>
          </div>
        </div>
      </div>
      <div v-if="dailyRecords.length > 0">
        <div class="table-responsive mb-4">
          <table class="table table-striped table-hover">
            <thead class="table-dark">
              <tr>
                <th scope="col">车牌号</th>
                <th scope="col">进入时间</th>
                <th scope="col">离开时间</th>
                <th scope="col">停车时间</th>
                <th scope="col">停车位置</th>
                <th scope="col">入场照片</th>
                <th scope="col">出场照片</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="record in dailyRecords" :key="record.id">
                <td>{{ record.plate_number }}</td>
                <td>{{ record.enter_time }}</td>
                <td>{{ record.exit_time || "未离开" }}</td>
                <td>
                  {{
                    calculateParkingTime(record.enter_time, record.exit_time)
                  }}
                </td>
                <td>{{ record.location }}</td>
                <!-- <td>{{ record }}</td> -->
                <td><el-image style="height: 60px;width: 150px;" :src="url + record.filename" :zoom-rate="1.2"
                    :max-scale="7" :min-scale="0.2" :preview-src-list="[url + record.filename]" show-progress
                    :initial-index="4" fit="cover" /></td>
                <td>
                  <el-image style="height: 60px;width: 150px;" :src="url + record.exit_filename" :zoom-rate="1.2"
                    :max-scale="7" :min-scale="0.2" :preview-src-list="[url + record.exit_filename]" show-progress
                    :initial-index="4" fit="cover" v-if="record.exit_filename != null && record.exit_filename != ''" />
                  <div v-if="record.exit_filename == ''">
                    人工出场
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="showDailyNotFound" class="alert alert-warning text-center">
        未查找到
      </div>
    </div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>